<template>
  <div class="change-wrap">
    <van-cell-group class="user-group">
      <van-field v-model="form.new_password" type="password" data-name="new_password"  placeholder="请输入新密码" @change="onChangeField"/>
      <van-field v-model="form.sure_new_password" type="password" data-name="sure_new_password"  placeholder="请再次输入新密码" @change="onChangeField"/>
      <van-field v-model="form.phone" disabled="me.phone" placeholder="phone" data-name="phone" @change="onChangeField"/>
      <van-field  :value="form.code" data-name="code" clearable center placeholder="请输入短信验证码" @change="onChangeField" use-button-slot>
        <van-button class="mk-button" slot="button" size="small" type="default" :disabled="send_code_btn_disabled" @click="sendCode">{{send_code_btn_text}}</van-button>
      </van-field>
    </van-cell-group>
    <div class="save-btn">
      <van-button class="mk-button" type="primary" size="normal" block @click="onSave">保存</van-button>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import * as CommonAction from '@/api/common'
import * as Utils from '@/utils'
import * as ChangePasswordAction from '@/api/user'
import Toast from 'vant-weapp/dist/toast/toast'
import {mapState} from 'vuex'

export default {
  data () {
    return {
      form: {},
      send_code_btn_text: '发送验证码',
      send_code_btn_disabled: false,
      timer: 0
    }
  },
  computed: mapState(['me']),
  onShow () {
    this.form = {}
    if (this.me.phone) this.form.phone = this.me.phone
  },
  beforeMount () {
    this.timer = 0
    this.send_code_btn_text = '发送验证码'
    this.send_code_btn_disabled = false
  },
  methods: {
    onChangeField (event) {
      this.form[event.currentTarget.dataset.name] = event.mp.detail
    },
    onSave () {
      if (this.form.new_password !== this.form.sure_new_password) {
        Toast('2次新密码不一致')
        return
      }
      if (!(this.form.new_password && this.form.sure_new_password)) {
        Toast('密码不能为空')
        return
      }
      if (this.form.new_password.length < 8) {
        Toast('密码不能低于8位')
        return
      }
      let params = {
        password: this.form.sure_new_password,
        code: this.form.code
      }
      ChangePasswordAction.changePassword(params)
        .then(() => {
          wx.switchTab({ url: './index' })
        }).catch(err => Toast(err.msg))
    },
    sendCode () {
      if (this.timer > 0) return
      if (!this.form.phone) {
        Toast('手机号不能为空')
        return
      }
      if (!Utils.default.validator.isMobile(this.form.phone)) {
        Toast('请输入有效的手机号')
        return
      }
      this.timer = 60
      this.send_code_btn_text = this.timer + 's'
      this.send_code_btn_disabled = true
      let that = this
      let t = setInterval(function () {
        that.timer = that.timer - 1
        if (that.timer === 0) {
          clearInterval(t)
          that.send_code_btn_disabled = false
          that.send_code_btn_text = '发送验证码'
        } else {
          that.send_code_btn_text = that.timer + 's'
        }
      }, 1000)
      CommonAction.sendVerifyCode({ phone: this.form.phone })
        .then(() => {
          Toast('已发送到您的手机')
        })
        .catch(err => Toast(err.msg))
    }
  }
}
</script>

<style scoped lang="less">
.save-btn {
  margin: 10px;
}
</style>
